Load custom fonts without webfont.js #2944
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related issues
N/A
Short description and why it's useful
Right now custom google fonts (Playfair Display, Robot and Material Icons) are loaded using webfont.js which is useful because it helps load custom fonts asynchronously and prevent FOUC however it comes at a cost.
I noticed this also run some expensive tasks in the browser that triggers "Style Recalculations" which can be very costly for the browser and one the things Google recommends minimising.
Purple spikes = style recalculations
Performance trace (before)
I replaced this to use a css
@import
which is not the best but I believe with the addition offont-display: swap
it can help cover the benefits of webfont.js without the processing drawbacks (and also reduces the JS used by ~3%)Fewer purple spikes
Performance trace (after)
It's hard for me to measure the performance benefits with my local server but I noticed around ~10% increase in FP, FCP and FMP. We can include the
@font-face
declarations directly which should help with latency while getting the fonts as well but that's open to discussion.Screenshots of visual changes before/after (if there are any)
See above
Which environment this relates to
Check your case. In case of any doubts please read about Release Cycle
develop
branch and want to merge it back todevelop
release
branch and want to merge it back torelease
hotfix
ormaster
branch and want to merge it back tohotfix
Upgrade Notes and Changelog
IMPORTANT NOTICE - Remember to update
CHANGELOG.md
with description of your changeContribution and currently important rules acceptance